<template>
    <v-card>
        <v-tabs v-model="tab" align-tabs="center" color="deep-purple-accent-4" fixed-tabs>
            <v-tab value="user">用户管理</v-tab>
            <v-tab value="role">角色管理</v-tab>
            <v-tab value="permission">权限管理</v-tab>
        </v-tabs>

        <v-card-text :style="{'height':tabHeight+'px'}">
            <v-tabs-window v-model="tab">
                <v-tabs-window-item value="user">
                    <adminUserView ref="adminUserView"/>
                </v-tabs-window-item>

                <v-tabs-window-item value="role">
                    <AdminRoleView ref="adminRoleView" @updateRole="emitDispatch('updateRole')"/>
                </v-tabs-window-item>

                <v-tabs-window-item value="permission">
                    <admin-permission-view ref="adminPermissionView" @updatePermission="emitDispatch('updatePermission')"/>
                </v-tabs-window-item>
            </v-tabs-window>
        </v-card-text>
    </v-card>
</template>

<script>
import AdminPermissionView from './AdminPermissionView.vue';
import AdminRoleView from './AdminRoleView.vue';
import AdminUserView from './AdminUserView.vue';
export default {
  components: { AdminUserView, AdminRoleView, AdminPermissionView },
    data() {
        return {
            tab: 'user',
            tabHeight:300
        }
    },
    mounted() {
        this.tabHeight = window.innerHeight - 64 - 48;
    },
    methods: {
        emitDispatch(eventName){
            switch (eventName) {
                case 'updateRole':
                    this.$refs.adminUserView.getRoleList()
                    break;
                case 'updatePermission':
                    this.$refs.adminRoleView.getAllPermission()
                    break;
            }
        }
    },
}
</script>

<style scoped></style>